<template>
    <a-modal 
        title="选择驻地坐标（单击地图）" 
        width="50%" 
        :visible="visible"
        :maskClosable="false" 
        :body-style="{ paddingBottom: '10px' }" 
        :closable="false" 
        class="content_drawer"
        @ok="onClose"
        @cancel="onCancel"
        >
        <div class="getxy__map" id="getxymap" style="height:600px;width:100%"></div>
    </a-modal>
</template>
<script>
    export default {
        data() {
            return {
                visible: false,
                init:false,
                xy:[],
                promise_init:null,
                promise_resolve:null,
            }
        },
        mounted() {
            this.promise_init=new Promise((resolve)=>{
                this.promise_resolve=resolve;
            })
            this.$Bus.$on('set_visible',() => {
                this.visible = true
                if(this.init==false){
                    this.$nextTick(()=>{
                        this.initmap();
                        this.init=true
                        this.promise_resolve(true)
                    })
                }
            })
            this.$Bus.$on('set_xy', async (x,y) => {
                await this.promise_init
                if(x>0 && y>0){
                    await this.promise_init
                    let xy=[x-0,y-0]
                    let geometry4326=new ol.geom.Point(ol.proj.transform(xy,'EPSG:4326', 'EPSG:3857' )).getCoordinates()
                    this.addPoiMarker(geometry4326[0],geometry4326[1]);
                    let point=new ol.geom.Point([geometry4326[0],geometry4326[1]])
                    this.olView.fit(point,{
                        duration:500,
                        maxZoom:15
                    })
                }
            })
        },
        methods: {
            onClose() {
                this.$Bus.$emit('set_visible_back',this.xy);
                this.visible = false
            },
            onCancel() {
                this.visible = false
            },
            //初始化地图
            initmap() {
                let layers=this.Get_TDTlayers();
                this.Groupimg=layers[1];
                this.Groupimg.setVisible(true); 
                this.olView=new ol.View({
                    center: [12431971.984681873,4988312.46254533],//ol.proj.transform([111.676, 40.914],'EPSG:4326', 'EPSG:3857' ) ,
                    zoom:13,
                })
                this.olMap=new ol.Map({
                    controls:[],
                    target: 'getxymap',
                    maxTilesLoading:5,
                    layers: [this.Groupimg],
                    view: this.olView
                })
                //注记图层
                this.PoiSource = new ol.source.Vector({
                    features:[]
                });
                let stationSourceLayer = new ol.layer.Vector({
                    source: this.PoiSource,
                    style: this.station_maker_style
                });
                this.olMap.addLayer(stationSourceLayer)
                // 
                this.olMap.on("singleclick",this.singleclick) 
                this.olMap.addControl(new ol.control.MousePosition({
                    coordinateFormat:ol.coordinate.createStringXY(4),
                    projection:"EPSG:4326",
                    className:"standard-map__mouse-position",
                    target:document.getElementById("getxymap"),
                    undefinedHTML:"0,0"
                }));
                this.$nextTick(()=>{
                    this.olMap.updateSize();
                })
                
            },
            singleclick(event){
                this.addPoiMarker(event.coordinate[0],event.coordinate[1]);
            },
            addPoiMarker(x, y)
            {
                this.PoiSource.clear()
                let feature=new ol.Feature({
                    geometry:new ol.geom.Point([x, y])
                });
                feature.setStyle(new ol.style.Style({
                    image: new ol.style.Icon({
                        src: `${window.Glod.baseUrl}pics/xzc.png`,
                        size:[36, 36],
                        scale:0.5
                    })
                }) )
                this.PoiSource.addFeature(feature)
                let geometry4326=new ol.geom.Point(ol.proj.transform([x, y],'EPSG:3857', 'EPSG:4326' )).getCoordinates()
                this.xy=[geometry4326[0].toFixed(6),geometry4326[1].toFixed(6)]
            },
        }
    }
</script>